<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<jsp:include page="/static/iframe/import/_meta.jsp"></jsp:include>
<jsp:include page="/static/iframe/import/_header.jsp"></jsp:include>
<title>用户管理</title>
<link href="static/iframe/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="static/iframe/bootstrap/bootstrap-table/css/bootstrap-table.min.css"
	rel="stylesheet">
<link href="static/iframe/bootstrap/css/bootstrap-theme.min.css"
	rel="stylesheet">
<link
	href="static/iframe/bootstrap/bootstrap-font-Awesome/Font-Awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>
<style type="text/css">
.fixed-table-body {
	height: auto;
}

.btn-group-vertical>.btn, .btn-group>.btn {
	height: 35px;
}

a:hover {
	text-decoration: none;
}

#toolbarDiv {
	position: relative;
	bottom: -16px;
}

#toolbar {
	position: relative;
}

.layui-breadcrumb a {
	vertical-align: middle;
}

.fixed-table-toolbar .columns label input {
	vertical-align: text-bottom;
	margin: 0px;
}
</style>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb" style="visibility: visible;"><a>
				<cite> 首页<span class="layui-box">&gt;</span></cite>
		</a> <a> <cite> 系统管理<span class="layui-box">&gt;</span></cite></a> <a>
				<cite>用户管理</cite>
		</a> </span> <a class="btn btn-sm btn-success"
			style="line-height: 1.6em; margin-top: 2px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="glyphicon glyphicon-refresh" style="line-height: 20px"></i></a>
	</div>
	<div class="x-body">
		<div class="row">
			<form id="formSearch" class="form-horizontal">
				<div
					class="col-md-2 col-lg-2 col-sm-2 col-xs-2 col-md-offset-2 col-lg-offset-2  col-sm-offset-1  col-xs-offset-1">
				</div>
				<div class="col-md-4 col-lg-4 col-sm-6 col-xs-6">
					<div class="input-group">
						<input type="text" class="form-control radius" placeholder="请输入姓名"
							id="realname"> <span class="input-group-btn">
							<button class="btn btn-success radius" type="button"
								id="userSearch">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</span>
					</div>
				</div>
			</form>
		</div>
		<div id="toolbar">
			<div id="toolbarDiv">
				<a href="javascript:;" onclick="batchdel()"
					class="btn btn-danger radius btn-sm"><i
					class="glyphicon glyphicon-trash"></i> 批量删除</a> <a href="javascript:;"
					onclick="user_add('添加用户','user/add','450','430')"
					class="btn btn-primary radius btn-sm"><i
					class="glyphicon glyphicon-plus"></i> 添加</a>
			</div>
		</div>
		<table id="userTable" style="white-space: nowrap;"
			class="table table-hover" data-pagination="true"
			data-toolbar="#toolbar" data-response-handler="responseHandler"
			data-content-type="application/x-www-form-urlencoded"
			data-undefined-text=" ">
			<thead>
				<tr>
					<th data-checkbox="true" data-field="state" data-align="center"></th>
					<th data-width="80" data-align="center" data-field="id"
						data-sortable="true" data-align="center">用户编号</th>
					<th data-width="100" data-align="center" data-field="userName">用户名</th>
					<th data-width="90" data-align="center" data-field="realName">真实姓名</th>
					<th data-formatter="fmtSalary" data-width="100" data-align="center"
						data-field="salary" data-sortable="true">薪资</th>
					<th data-width="100" data-align="center" data-field="gender">性别</th>
					<th data-width="100" data-align="center" data-field="birthday"
						data-formatter="fmtCreateTime" data-sortable="true">出生年月</th>
					<th data-width="100" data-align="center"
						data-field="organizationName">所谓单位</th>
					<th data-width="100" data-align="center"
						data-formatter="fmtTelePhone" data-field="telephone">联系电话</th>
					<th data-width="200" data-align="center" data-field="remark">备注</th>
					<th data-width="100" data-align="center" data-formatter="operation">操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

	</div>
</body>
<!--请在下方写此页面业务相关的脚本-->
<jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include>
<script type="text/javascript"
	src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/moment.js"></script>
<script type="text/javascript" src="static/plugins/window/layershow.js"></script>
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-table/js/lodash.min.js"></script>
<script type="text/javascript"
	src="static/plugins/boostrap-table-responseHandler/rememberme.js"></script>

<c:if test="${fn:contains(userSession.resourceList, 'user/update')}">
	<script type="text/javascript">
		$.canEdit = true;
	</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/delete')}">
	<script type="text/javascript">
		$.canDelete = true;
	</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/add')}">
	<script type="text/javascript">
		$.canInsert = true;
	</script>
</c:if>
<script type="text/javascript">
	$(document).ready(function() {
		//初始化表格
		initTable();
		//当点击查询按钮的时候执行  
		$("#userSearch").bind("click", initTable);

	});
	//初始化表格

			//初始化表格
			function initTable() {
				//先销毁表格  
				$("#userTable").bootstrapTable('destroy');
				//初始化表格,动态从服务器加载数据  
				$("#userTable").bootstrapTable({
					method: "post", //使用get请求到服务器获取数据  
					url: "user/tableView", //获取数据的Servlet地址  
					dataType: "json",
					striped: true, //表格显示条纹  
					pagination: true, //启动分页  4
					pageSize: 5, //每页显示的记录数  
					pageNumber: 1, //当前第几页  
					pageList: [5, 10, 15, 20, 25], //记录数可选列表  
					//search: true, //是否启用查询
					//searchOnEnterKey : true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
					showColumns: true, //显示下拉框勾选要显示的列  
					showRefresh: true, //显示刷新按钮 ·
					uniqueId : "id", //每一行的唯一标识，一般为主键列
					clickToSelect: true, //是否启用点击选中行
					sidePagination: "server", //表示服务端请求  
					paginationLoop: false,
					//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
					//设置为limit可以获取limit, offset, search, sort, order  
					queryParamsType: "limit",
					icons: {
						refresh: 'glyphicon-repeat',
						toggle: 'glyphicon-list-alt',
						columns: 'glyphicon-list'
					},
					queryParams: function queryParams(params) { //设置查询参数  
						var param = {
							offset: params.offset,
							limit: params.limit,
							sort: params.sort,
							order: params.order,
							realName: $.trim($("#realname").val())
							} 
						return param;
					},
					onLoadError: function() { //加载失败时执行  
						layer.msg("加载数据失败", {
							time: 1500,
							icon: 2
						});
					}
				})
	}

	//记住行选中
	var $table = $('#userTable'), selections = [];
	$(function() {
		$table.on('check.bs.table check-all.bs.table '
				+ 'uncheck.bs.table uncheck-all.bs.table',
				function(e, rows) {
					var ids = $.map(!$.isArray(rows) ? [ rows ] : rows,
							function(row) {
								return row.id;
							}), func = $.inArray(e.type,
							[ 'check', 'check-all' ]) > -1 ? 'union'
							: 'difference';
					selections = _[func](selections, ids);
				});
	});

	function responseHandler(res) {
		$.each(res.rows, function(i, row) {
			row.state = $.inArray(row.id, selections) !== -1;
		});
		return res;
	}

	//value: 所在collumn的当前显示值，
	//row:整个行的数据 ，对象化，可通过.获取
	//表格-操作 - 格式化 
	function operation(value, row, index) {
		var str = "&nbsp;";
		if (row.deleteStatus == 1) {
			str = "&nbsp;&nbsp;&nbsp;已删除无操作";
		} else {
			str += "&nbsp;&nbsp;"
			//if($.canEdit){
			str += "<a style='text-decoration:none' onClick=user_update('编辑','user/update/"
					+ row.id
					+ "','450','430')  title='编辑'  href='javascript:;'  class='ml-5'><i class='glyphicon glyphicon-edit'></i></a>";
			//}
			str += "&nbsp;&nbsp;&nbsp;&nbsp;"
			//if($.canPWD){
			str += "<a style='text-decoration:none' class='ml-5' onClick=update_password('修改密码','user/updatePwd/"
					+ row.id
					+ "','420','350') href='javascript:;' title='修改密码'><i class='glyphicon glyphicon-wrench'></i></a>";
			//}
			str += "&nbsp;&nbsp;&nbsp;&nbsp;"
			//if($.canDelete){
			str += "<a title='删除' href='javascript:;' onclick=user_delete(this,'"
					+ row.id
					+ "') class='ml-5' style='text-decoration:none'><i class='glyphicon glyphicon-trash'></i></a>";
			//}
		}
		return str;
	}

	//批量删除
	function batchdel() {
		var row = $.map($("#userTable").bootstrapTable('getSelections'),
				function(row) {
					return row
				});
		//row 是数组
		for (var i = 0; i < row.length; i++) {
			console.log(row[i].字段名);
		}
		var ids = "";
		for (var i = 0; i < row.length; i++) {
			if (i == 0 || i == "0") {
				ids += row[i].id;
			} else {
				ids += "," + row[i].id;
			}
		}
		if (ids == "") {
			//透明弹出层
			layer.msg('请选择!', {
				icon : 2,
				time : 1000
			});
		} else {
			layer.confirm('确认要删除吗(Are you sure)?', {
				btn : [ '确定', '取消' ]
			}, function(index) {
				$.ajax({
					type : 'post',
					url : 'user/batchdelete/' + ids,
					dataType : 'json',
					success : function(result) {
						if (result.flag) {
							//$(obj).parents("tr").remove();
							layer.msg('删除成功!', {
								icon : 1,
								time : 1000
							});
							setTimeout(location.replace(location.href), 1000);
						} else {
							layer.msg(result.msg, {
								icon : 2,
								time : 1000
							});
							setTimeout(location.replace(location.href), 1000);
						}
					},
					error : function(data) {
						console.log(data.msg);
					},
				});
			});
		}

	}

	/*用户-编辑*/
	function user_update(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	/*密码-修改*/
	function update_password(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	/*用户-添加*/
	function user_add(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	/*格式化薪资*/
	function fmtSalary(value, row, index) {
		return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
	}
	/*格式化电话号码*/
	function fmtTelePhone(value, row, index) {
		return value.replace(/(\d{3})(\d{4})/, "$1-$2-");
	}
	/*格式创建时间*/
	function fmtCreateTime(value, row, index) {
		return moment(value).format('YYYY-MM-DD');
	}

	/*用户-删除*/
	function user_delete(obj, id) {
		layer.confirm('确认要删除吗？', function(index) {
			$.ajax({
				type : 'POST',
				url : 'user/delete',
				dataType : 'json',
				data : {
					"id" : id,
				},
				success : function(data) {
					if (data.flag) {
						layer.msg(data.msg, {
							icon : 1,
							time : 1000
						});
						initTable();
					} else {
						layer.msg(data.msg, {
							icon : 2,
							time : 1000
						});
					}
				},
				error : function(data) {
					layer.msg(data.msg, {
						icon : 2,
						time : 1000
					});
				},
			});
		});
	}
</script>
</html>